<template>
  <div class="browse">
    <div class="browse-first">
      <div class="browse-first-server">{{ orderBrowse.type | typeToName }}</div>
      <span class="browse-first-label" v-if="orderBrowse.isHotOrder">急单</span>
      <div class="browse-first-title">{{ orderBrowse.title }}</div>
      <div class="browse-first-money-icon">
        ￥<span class="money">{{ orderBrowse.price }}</span>
      </div>
    </div>

    <div class="browse-second">
      <img :src="address" alt="" />
      <span>{{ orderBrowse.address }}</span>
      <div></div>
    </div>

    <div class="browse-third">
      <div class="browse-third-left">
        <div class="browse-third-img"></div>
        <span>4小时前发布</span>
      </div>

      <div class="browse-third-details">查看详情</div>
    </div>
  </div>
</template>

<script>
import address from "../assets/image/address_icon.png";
export default {
  filters:{
    typeToName(type){
      switch(type){
        case 0: return "飞行表演";
        case 1: return "岗位招聘";
        case 2: return "二手转让";
        default:break;
      }
    }
  },
  data() {
    return {
      address,
    };
  },
  props: {
    orderBrowse: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    cutString(str) {
      if (str.length > 12) {
        //长度如果很长 末尾加...
        return str.substring(0, 12) + "...";
      } else {
        return str;
      }
    },
  },
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
}
.browse {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
  &-first {
    .flex();
    flex-direction: row;
    justify-content: space-between;
    &-label {
      width: max-content;
      padding: 2px 4px;
      width: 40px;
      margin-left: 6px;
      background-color: #ff4940;
      color: white;
      font-size: 11px;
      border-radius: 2px;
      box-sizing: border-box;
    }
    &-server {
      width: 58px;
      height: 22px;
      line-height: 22px;
      border: 0.5px solid #4578ff;
      //   margin: 20px 0 20px 20px;
      font-size: 11px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4578ff;
      text-align: center;
    }
    &-title {
      font-size: 13px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      margin-left: 9px;
      width: 159px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &-money-icon {
      font-size: 11px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4578ff;
      margin-left: 32px;
    }
    .money {
      font-size: 21px;
      font-family: CenturyGothic-Bold, CenturyGothic;
      font-weight: bold;
      color: #4578ff;
    }
  }
  &-second {
    .flex();
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 14px;

    img {
      width: 7.49px;
      height: 9px;
    }
    span {
      font-size: 11px;
      margin-left: 4px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #acb8c2;
    }
  }
  &-third {
    .flex();
    flex-direction: row;
    justify-content: space-between;
    // 三个元素用它会 形成 1     2      3这种分开的感觉，这里分两个，一左一右
    &-left {
      .flex();
      flex-direction: row;
    }
    &-img {
      width: 7.48px;
      height: 7.48px;
      background-image: url("../assets/image/clock_icon.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
    span {
      margin-left: 5px;
      font-size: 11px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #acb8c2;
    }
    &-details {
      width: 72px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background: #4578ff;
      border-radius: 2px;
      font-size: 11px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
  }
}
</style>
